{% extends 'base.html' %} 
{% block title %} INDEX  {% endblock %}
{% block content %}
					
						<div class="outter-wp">
								<!--custom-widgets-->
												<div class="custom-widgets">
												   <div class="row-one">
														<div class="col-md-3 widget">
															<div class="stats-left ">
																<h5>预留</h5>
																<h4> 预留</h4>
															</div>
															<div class="stats-right">
																<label>90</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="col-md-3 widget states-mdl">
															<div class="stats-left">
																<h5>预留</h5>
																<h4>预留</h4>
															</div>
															<div class="stats-right">
																<label> 85</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="col-md-3 widget states-thrd">
															<div class="stats-left">
																<h5>预留</h5>
																<h4>预留</h4>
															</div>
															<div class="stats-right">
																<label>51</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="col-md-3 widget states-last">
															<div class="stats-left">
																<h5>预留</h5>
																<h4>预留</h4>
															</div>
															<div class="stats-right">
																<label>30</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="clearfix"> </div>	
													</div>
												</div>
												<!--//custom-widgets-->
												<!--/charts-->
												<div class="charts">
														<div class="chrt-inner">
														<div class="col-md-6 chrt-two">
														<h3 class="sub-tittle">预留图表</h3>
														<div id="chartdiv2"></div>	
														<script>
															var chart = AmCharts.makeChart("chartdiv2", {
																	"type": "serial",
																	"theme": "patterns",
																	"legend": {
																		"useGraphSettings": true
																	},
																	"dataProvider": [{
																		"year": 1930,
																		"italy": 1,
																		"germany": 5,
																		"uk": 3
																	}, {
																		"year": 1934,
																		"italy": 1,
																		"germany": 2,
																		"uk": 6
																	}, {
																		"year": 1938,
																		"italy": 2,
																		"germany": 3,
																		"uk": 1
																	}, {
																		"year": 1950,
																		"italy": 3,
																		"germany": 4,
																		"uk": 1
																	}, {
																		"year": 1954,
																		"italy": 5,
																		"germany": 1,
																		"uk": 2
																	}, {
																		"year": 1958,
																		"italy": 3,
																		"germany": 2,
																		"uk": 1
																	}, {
																		"year": 1962,
																		"italy": 1,
																		"germany": 2,
																		"uk": 3
																	}, {
																		"year": 1966,
																		"italy": 2,
																		"germany": 1,
																		"uk": 5
																	}, {
																		"year": 1970,
																		"italy": 3,
																		"germany": 5,
																		"uk": 2
																	}, {
																		"year": 1974,
																		"italy": 4,
																		"germany": 3,
																		"uk": 6
																	}, {
																		"year": 1978,
																		"italy": 1,
																		"germany": 2,
																		"uk": 4
																	}],
																	"valueAxes": [{
																		"integersOnly": true,
																		"maximum": 6,
																		"minimum": 1,
																		"reversed": true,
																		"axisAlpha": 0,
																		"dashLength": 5,
																		"gridCount": 10,
																		"position": "left",
																		"title": "Place taken"
																	}],
																	"startDuration": 0.5,
																	"graphs": [{
																		"balloonText": "place taken by Italy in [[category]]: [[value]]",
																		"bullet": "round",
																		"hidden": true,
																		"title": "Italy",
																		"valueField": "italy",
																		"fillAlphas": 0
																	}, {
																		"balloonText": "place taken by Germany in [[category]]: [[value]]",
																		"bullet": "round",
																		"title": "Germany",
																		"valueField": "germany",
																		"fillAlphas": 0
																	}, {
																		"balloonText": "place taken by UK in [[category]]: [[value]]",
																		"bullet": "round",
																		"title": "United Kingdom",
																		"valueField": "uk",
																		"fillAlphas": 0
																	}],
																	"chartCursor": {
																		"cursorAlpha": 0,
																		"zoomable": false
																	},
																	"categoryField": "year",
																	"categoryAxis": {
																		"gridPosition": "start",
																		"axisAlpha": 0,
																		"fillAlpha": 0.05,
																		"fillColor": "#000000",
																		"gridAlpha": 0,
																		"position": "top"
																	},
																	"export": {
																		"enabled": true,
																		"position": "bottom-right"
																	 }
																});
																</script>
				
														 </div>
														</div>														
												<!--//charts-->
												<div class="area-charts">	
														<div class="chrt-inner">			
														<div class="col-md-6 tini-time-line">
														 <h3 class="sub-tittle">Time line </h3>
															<ul class="timeline">
																<li>
																  <div class="timeline-badge info"><i class="fa fa-smile-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
																
																<li>
																  <div class="timeline-badge primary"><i class="fa fa-star-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
																
																
																
																<li>
																  <div class="timeline-badge danger"><i class="fa fa-times-circle-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
																
																<li>
																  <div class="timeline-badge success"><i class="fa fa-check-circle-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
															</ul>
														</div>
															<div class="clearfix"></div>		
													</div>
										<!--/bottom-grids-->		 
									<div class="bottom-grids">
										<div class="dev-table">    
											<div class="col-md-4 dev-col">                                    

                                            <div class="dev-widget dev-widget-transparent">
                                                <h2 class="inner one">服务器使用率</h2>
                                                <p>Today server usage in percentages</p>                                        
                                                <div class="dev-stat"><span class="counter">68</span>%</div>                                                                                
                                                <div class="progress progress-bar-xs">
                                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                                                </div>                                        
                                                <p>We Todayly recommend you change your plan to <strong>Pro</strong>. Click here to get more details.</p>

                                                <a href="#" class="dev-drop">Take a closer look <span class="fa fa-angle-right pull-right"></span></a>
                                            </div>

                                        </div>
                                        <div class="col-md-4 dev-col mid">                                    

                                            <div class="dev-widget dev-widget-transparent dev-widget-success">
                                                 <h3 class="inner">预留</h3>
                                                <p>This is Today earnings per last year</p>                                        
                                                <div class="dev-stat">$<span class="counter">75,332</span></div>                                                                                
                                                <div class="progress progress-bar-xs">
                                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 79%;"></div>
                                                </div>                                        
                                                <p>We happy to notice you that you become an Elite customer, and you can get some custom sugar.</p>

                                                <a href="#" class="dev-drop">Take a closer look <span class="fa fa-angle-right pull-right"></span></a>
                                            </div>

                                        </div>
                                        <div class="col-md-4 dev-col">                                    

                                            <div class="dev-widget dev-widget-transparent dev-widget-danger">
                                                 <h3 class="inner">预留</h3>
                                                <p>All your earnings for this time</p>
                                                <div class="dev-stat">$<span class="counter">5,321</span></div>                                                                                
                                                <div class="progress progress-bar-xs">
                                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                                                </div>                                        
                                                <p>You can withdraw this money in end of each month. Also you can spend it on our marketplace.</p>

                                                <a href="#" class="dev-drop">Take a closer look <span class="fa fa-angle-right pull-right"></span></a>                                        
                                            </div>

                                        </div>
										<div class="clearfix"></div>		
										
										</div>
										</div>
									<!--//bottom-grids-->
									
									</div>
									<!--/charts-inner-->
									</div>
										<!--//outer-wp-->
									</div>
					
{% endblock %}